<template>
	<view class="sums" style="">
		<!-- <image class="bgimg" src="../../static/tabsIcon/clubtop.jpg" mode="" style=""></image> -->
			<view class="tab">
				<view @click="xxFn = 1" :class="xxFn == 1 ? 'fapiao' : ''">团队</view>
				<view @click="xxFn = 2" :class="xxFn == 2 ? 'fapiao' : ''">个人</view>
			</view>
			<view class="mains">
				<xx v-if="xxFn == 1"></xx>
				<xx1 v-if="xxFn == 2"></xx1>
			</view>
	</view>
</template>

<script>
import xx from './clubbers.vue';
import xx1 from './personal.vue';
export default {
	data() {
		return {
			xxFn: 1
		};
	},
	components: {
		xx,
		xx1
	},
	methods: {}
};
</script>
<style>
page {
	/* background-color: #eee; */
}
</style>
<style scoped lang="scss">
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
		background-color:transparent;
	}
	.sums{
		height: 100vh;
		background-image: url(../../static/tabsIcon/clubtop.jpg);
		background-size: 100% 50%;
		background-repeat: no-repeat;
	}
	.bgimg {
		position: absolute;
		// float: left;
		// z-index: -1;
		width: 100vw;
		height: 40vh;
		// -webkit-filter: blur(10rpx);
		// -moz-filter: blur(10rpx);
		// -o-filter: blur(10rpx);
		// -ms-filter: blur(10rpx);
		// filter: blur(10rpx);
	}
.butt {
	margin: 20rpx 15px 0 0;
	border-radius: 20px;
	// background-color: #cd2a29;
	height: 70rpx;
	font-size: 28rpx;
	color: white;
	color: #ffffff;
}
.tab {
	display: flex;
	text-align: center;
	// background-color: white;
	view {
		width: 50%;
		padding: 20upx 0;
		position: relative;
		color: #FFFFFF;
		transition: all 0.3s ease-in-out;
		&:active {
			background-color: #FFBE53;
		}
	}

	.fapiao {
		color: #FFBE53;
		font-weight: 700;

		&:after {
			content: '';
			position: absolute;
			height: 10upx;
			border-radius: 15upx;
			width: 40%;
			background-color: #FFBE53;
			bottom: 0;
			left: 50%;
			transform: translate(-50%);
			border-radius: 40upx;
		}
	}
	
}
.mains{
		position: relative;
		padding-top: 20upx;
		// height: calc(100% - 23rpx - 10vh - 101rpx );
		height: calc(100% - 80upx);
		overflow: auto;
		top: 10upx;
	}
</style>
